<div id="app">
    <b-carousel id="carousel1"
                ref="carousel1"
                controls
                indicators
                :interval="3500"
                v-model="slide"
                @slide="onSlide"
                @slid="onSlid"
                background="grey">

        <!-- Text slides -->
        <b-carousel-slide :img="blankImg(1024,480)"
                          caption="First slide"
                          text="Nulla vitae elit libero, a pharetra augue mollis interdum.">
        </b-carousel-slide>

        <!-- Slides with custom text -->
        <b-carousel-slide :img="blankImg(1024,480)">
            <h1>Hello world!</h1>
        </b-carousel-slide>

        <!-- Slides with image -->
        <b-carousel-slide img="https://lorempixel.com/1024/480/technics/2/">
        </b-carousel-slide>

        <!-- Slides with image -->
        <b-carousel-slide img="https://lorempixel.com/1024/480/technics/4/">
        </b-carousel-slide>

    </b-carousel>

    <p class="mt-4">
        Slide #: {{ slide }}<br>
        Is Sliding: {{ sliding }}
    </p>
</div>
